import React from 'react'
import { useEffect, useState } from 'react'
import TabBar from '@c/TabBar'
import './style.scss'
import { SideBar } from 'antd-mobile'
import { useNavigate, useDispatch } from 'umi'
import { fetchCates, fetchItems } from '@a/index'
import Icon from '@/components/Icon'
export default function index() {
  const navigate = useNavigate()
  const dispatch = useDispatch()
  //初始化发送请求
 

  //商品分类请求接口 和 商品分类的变量
  const [tabs, setTabs] = useState<any[]>([])
  const [defaultTabs, setDefaultTabs] = useState('')
  const fetchCatesed = () => {
    fetchCates().then(res => {
      if (res.data.code === 0) {
        setTabs(res.data.data)
        setDefaultTabs(res.data.data[0].id+"")
      }
    })
  }

  console.log(defaultTabs, "defaultTabs");
  



  //商品分类请求接口

  //获取指定分类下的商品列表
  const [cateItems, setCateItems] = useState([])
  const fetchItemsed = (key: string) => {
    fetchItems({ categoryId: key }).then(res => {
      if (res.data.code === 0) {
        console.log(res);
        
        setCateItems(res.data.data.result)
      }
      if (res.data.code === 700) {
        setCateItems([])
      }
    })
  }
  const addCateSidear = (key: any) => {
    fetchItemsed(key)
  }
  //获取指定分类下的商品列表

  useEffect(() => {
    fetchCatesed()
   
  }, [])
  //初始化发送请求

  //监听商品分类数据的变化,调用指定分类的请求接口
useEffect(() => {
  fetchItemsed(defaultTabs)
}, [tabs])
//监听商品分类数据的变化,调用指定分类的请求接口

//右侧商品指定分类的商品列表的点击购物车加入购物车
const cateClick = (key: any) => {
dispatch({
  type: 'count/addCate',
  data:{
    goodsId: key,
    number: 1
  }
})
}

//右侧商品指定分类的商品列表的点击购物车加入购物车
  return (
    <div className='cate_umi'>
      {/* 头部的搜索图片 */}
      <div className="header_cate">
        <div className='header_nav' onClick={
          () => {
            navigate('/search')
          }
        }>
          <Icon name='&#xe60a;' size={25} />
          <span>搜索关键字、商品名</span>
        </div>
      </div>
      {/* 头部的搜索图片 */}

      {/* 侧边的分类导航 */}
      <div className='cate_sidear'>
        <SideBar
          defaultActiveKey={'72399'}
          onChange={(key) => {
            addCateSidear(key)
          }}
        >
          {tabs.map(item => (
            <SideBar.Item
              key={item.id}
              title={item.name}
            />

          ))}
        </SideBar>
      </div>
      {/* 侧边的分类导航 */}

      {/* 右边的商品分类详情的内容区 */}
      <div className='cate_nav'>
        {/* 当返回的商品数据为0时触发 */}
      {cateItems.length === 0 
  && 
  <div>
    <h3 style={{color: 'red', textAlign: 'center'}}>商品已售空</h3>
    </div>
    }
     {/* 当返回的商品数据为0时触发 */}
{
  cateItems.map(item => {
return (
  <div className="cate_box" key={item.id} 
  onClick={
() => {
  navigate('/detail',{state: {id:item.id}})
}
  }>
  <img src={item.pic} alt="" />
  <div className='nav_item'>
    <p>{item.name}</p>
    <div className='price_nav'>
      <span>￥{item.minPrice}</span>
      <Icon name='&#xe640;'
       size={25}
        color='red' 
        onClick={() => {
        cateClick(item.id)
      }}/>
    </div>
    </div>

 
</div>
)
  })
}

           
      </div>
      {/* 右边的商品分类详情的内容区 */}

      {/* 尾部的tabbar */}
      <TabBar />
      {/* 尾部的tabbar */}
    </div>
  )
}
